<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';

const currentTime = ref('');
const currentDate = ref('');
const currentWeek = ref('');
let timer: any = null;

const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}.${month}.${day}`;
};
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString();
  currentDate.value = formatDate(now);
  currentWeek.value = `星期${weekMap[now.getDay()]}`;
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<template>
  <div style="width: 300px; display: flex; align-items: center;">
    <div
      style="
        width: 90px;
        font-weight: 400;
        font-family: 思源黑体;
        color: #ACC9E6;
        padding: 0;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-right: 20px;
        text-align: right;
      "
    >
      {{ currentTime }}
    </div>
    <div
      style="
        width: fit-content;
        font-weight: 400;
        font-family: 思源黑体;
        color: #ACC9E6;
        padding: 0;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-right: 20px;
      "
    >
      {{ currentDate }}
    </div>
    <div
      style="
        width: 65px;
        font-weight: 400;
        font-family: 思源黑体;
        color: #ACC9E6;
        padding: 0;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
      "
    >
      {{ currentWeek }}
    </div>
  </div>
</template>
<style scoped style="stylus"></style>
